<template>
  <h1>权限管理</h1>
  <el-row>
    <el-col>
        <el-button type="success" @click="getAllUser">所有学生</el-button>
        <el-button type="success" @click="getFailUser">无登录权限学生</el-button>
    </el-col>

  </el-row>
  <br><br>
  <el-row>
    <el-col :span="24">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="用户名" width="100"/>
        <el-table-column prop="name" label="姓名" width="120"/>
        <el-table-column prop="majority" label="所读专业"widh="130" />
        <el-table-column prop="classNum" label="班级序号" width="100"/>
        <el-table-column prop="entryYear" label="入学年份" width="120"/>
        <el-table-column prop="graduateYear" label="毕业年份" width="120"/>
        <el-table-column prop="employers" label="就业单位" width="120"/>
        <el-table-column prop="city" label="城市" width="80"/>
        <el-table-column prop="phone" label="联系方式" width="150" />
        <el-table-column prop="permission" label="登录权限" width="120"/>
        <el-table-column prop="email" label="电子邮箱" width="200"/>
        <el-table-column label="操作" width="200" >
          <template v-slot="scope">
            <el-col>
              <el-button type="success" :size="'small'" @click="openAuthorityAdmin(scope.$index)">通过</el-button>
              <el-button type="warning" :size="'small'" @click="forbiddenAuthorityAdmin(scope.$index)">禁用</el-button>
              <el-button type="danger" :size="'small'" @click="deleteStudentAdmin(scope.$index)">删除</el-button>
            </el-col>
          </template>
        </el-table-column>

      </el-table>
      <br><br>
      <el-row>
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :background="true"
            layout="prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
        />
      </el-row>
    </el-col>
  </el-row>
</template>


<script setup lang="ts">

//当前页号
import {onMounted, ref} from "vue";
import {ReturnUser} from "@/api/types/contacts.ts";
import {
  allUserContactsAdmin,
  deleteStudent,
  failUserContactsAdmin,
  forbiddenAuthority,
  openAuthority
} from "@/api/admin.ts";
import {ElMessage} from "element-plus";

onMounted(() => {
  allUserContactsAdmin().then(data => {
    totalDate.value = data.data
    total.value = totalDate.value?.length
    handleCurrentChange(currentPage.value)
  })
})

const currentPage = ref(1)
//记录总数
const total = ref(0)
//一页的记录数
const pageSize = ref(7)

//所有数据
const totalDate = ref<ReturnUser[]>(
    []
)

//当前页的数据
const tableData = ref<ReturnUser[]>(
    []
)

const handleCurrentChange = (val: number) => {
  var startIndex = (val - 1) * pageSize.value
  total.value = <number>totalDate.value?.length
  tableData.value = totalDate.value?.slice(startIndex, startIndex + pageSize.value)
}

const getAllUser = () => {
  allUserContactsAdmin().then(data => {
    totalDate.value = data.data
    total.value = totalDate.value?.length
    handleCurrentChange(currentPage.value)
  })
}

const getFailUser = () => {
  failUserContactsAdmin().then(data => {
    totalDate.value = data.data
    total.value = totalDate.value?.length
    handleCurrentChange(currentPage.value)
  })
}

const openAuthorityAdmin = (rowId: number) => {
  const user = tableData.value[rowId]
  if (user.permission == 1) {
    ElMessage('该学生已有权限')
  } else {
    openAuthority(user.id).then(data => {
      tableData.value[rowId] = data.data[0]
      ElMessage(data.msg)
    })
  }
}

const forbiddenAuthorityAdmin = (rowId: number) => {
  const user = tableData.value[rowId]
  if (user.permission == 0) {
    ElMessage('该学生权限已被禁止')
  } else {
    forbiddenAuthority(user.id).then(data => {
      tableData.value[rowId] = data.data[0]
      ElMessage(data.msg)
    })
  }
}

const deleteStudentAdmin = (rowId: number) => {
  const user = tableData.value[rowId]
  if (user.permission == 1) {
    ElMessage('请先禁用登录权限')
  } else {
    deleteStudent(user.id).then(data => {
      totalDate.value?.splice(rowId, 1)
      handleCurrentChange(currentPage.value)
      ElMessage(data.msg)
    })
  }
}

</script>


<style scoped>

</style>
